<template>
  <div>
    <div class="date-range">
      <a-range-picker
        style="width: 400px; margin-right: 24px; margin-bottom: 25px"
        :shortcuts="shortcuts"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="changeDay"
        v-model="rangeDay"
        :allow-clear="false"
      ></a-range-picker>
    </div>
    <div class="analysis-data">
      <a-row justify="center">
        <a-col :span="5">
          <a-card class="card-radius card-space">
            <div class="data">
              <div class="num" style="color: red">
                {{ dashboardRecentData.shortUrlGenerateNum }}
              </div>
              <div class="desc">短链接生成数量</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="card-radius card-space">
            <div class="data">
              <div class="num" style="color: cornflowerblue">
                {{ dashboardRecentData.visitNum }}
              </div>
              <div class="desc">访问次数</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="card-radius card-space">
            <div class="data">
              <div class="num" style="color: green">
                {{ dashboardRecentData.visitIpNum }}
              </div>
              <div class="desc">访问IP数量</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="card-radius">
            <div class="data">
              <div class="num" style="color: coral">
                {{ dashboardRecentData.blacklistNum }}
              </div>
              <div class="desc">黑名单数量</div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div>
      <!-- todo 图表/表格等 后面有需要再弄 -->
    </div>
  </div>
</template>

<script setup name="dashboard">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import { recentData } from '@/api/dashboard'

const shortcuts = ref([
  {
    label: '今天',
    value: () => [dayjs(), dayjs()]
  },
  {
    label: '最近7天',
    value: () => [dayjs(), dayjs().add(-1, 'week')]
  },
  {
    label: '最近30天',
    value: () => [dayjs(), dayjs().add(-1, 'month')]
  },
  {
    label: '最近3个月',
    value: () => [dayjs(), dayjs().add(-3, 'month')]
  }
])
const rangeDay = ref([
  dayjs().format('YYYY-MM-DD'),
  dayjs().format('YYYY-MM-DD')
])
const dashboardRecentData = ref({
  shortUrlGenerateNum: 0,
  visitNum: 0,
  visitIpNum: 0,
  blacklistNum: 0
})

onMounted(() => {
  fetchRecentData()
})

const changeDay = () => {
  fetchRecentData()
}

const fetchRecentData = () => {
  let startDate = ''
  let endDate = ''
  const r = rangeDay.value
  if (r && r.length === 2) {
    const t0 = r[0]
    const t1 = r[1]
    if (t0 && t1) {
      startDate = t0
      endDate = t1
    }
  }
  recentData(startDate, endDate).then((data) => {
    dashboardRecentData.value = data.data
  })
}
</script>

<style lang="less" scoped>
.date-range {
  text-align: right;
  margin-top: 25px;
}

.analysis-data {
  .data {
    text-align: center;
    .num {
      font-size: 30px;
      font-weight: bolder;
    }
    .desc {
      font-size: 15px;
      margin-top: 15px;
    }
  }
}
.card-space {
  margin-right: 20px;
}

.card-radius {
  border-radius: 10px;
}
</style>
